﻿<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>Tasks</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="shortcut icon" href="logo.ico" type="image/x-icon" />
</head>
<body>
    <h1>Tasks</h1>

    <ng-view></ng-view>

    <!-- Libraries -->
    <script src="libs/angularjs/1.4.3/angular.min.js"></script>
    <script src="libs/angularjs/1.4.3/angular-route.min.js"></script>
    <script src="libs/angularjs/1.4.3/angular-resource.min.js"></script>

    <!-- Template -->
    <script type="text/ng-template" id="/todos.html">
        Search:
        <input type="text" ng-model="search.name">
        <ul>
            <li ng-repeat="todo in todos | filter: search">
                <input type="checkbox" ng-model="todo.completed" ng-change="update($index)">
                <a ng-show="!editing[$index]" href="#/{{todo._id}}">{{todo.name}}</a>
                <button ng-show="!editing[$index]" ng-click="edit($index)">edit</button>
                <button ng-show="!editing[$index]" ng-click="remove($index)">remove</button>

                <input ng-show="editing[$index]" type="text" ng-model="todo.name">
                <button ng-show="editing[$index]" ng-click="update($index)">update</button>
                <button ng-show="editing[$index]" ng-click="cancel($index)">cancel</button>
            </li>
        </ul>
        New task
        <input type="text" ng-model="newTodo">
        <button ng-click="save()">Create</button>
    </script>

    <script type="text/ng-template" id="/todoDetails.html">
        <h1>{{ todo.name }}</h1>
        completed:
        <input type="checkbox" ng-model="todo.completed">
        <br>
        note:
        <textarea ng-model="todo.note"></textarea>
        <br>
        <br>

        <button ng-click="update()">update</button>
        <button ng-click="remove()">remove</button>
        <a href="#">Cancel</a>
    </script>

    <script>
        angular.module('app', ['ngRoute', 'ngResource'])

          //---------------
          // Services
          //---------------

          .factory('Todos', ['$resource', function ($resource) {
              return $resource('/api/todos/:id', null, {
                  'update': { method: 'PUT' }
              });
          }])

          //---------------
          // Controllers
          //---------------

          .controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) {
              $scope.editing = [];
              $scope.todos = Todos.query();

              $scope.save = function () {
                  if (!$scope.newTodo || $scope.newTodo.length < 1) return;
                  var todo = new Todos({ name: $scope.newTodo, completed: false });

                  todo.$save(function () {
                      $scope.todos.push(todo);
                      $scope.newTodo = ''; // clear textbox
                  });
              }

              $scope.update = function (index) {
                  var todo = $scope.todos[index];
                  Todos.update({ id: todo._id }, todo);
                  $scope.editing[index] = false;
              }

              $scope.edit = function (index) {
                  $scope.editing[index] = angular.copy($scope.todos[index]);
              }

              $scope.cancel = function (index) {
                  $scope.todos[index] = angular.copy($scope.editing[index]);
                  $scope.editing[index] = false;
              }

              $scope.remove = function (index) {
                  var todo = $scope.todos[index];
                  Todos.remove({ id: todo._id }, function () {
                      $scope.todos.splice(index, 1);
                  });
              }
          }])

          .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', '$location', function ($scope, $routeParams, Todos, $location) {
              $scope.todo = Todos.get({ id: $routeParams.id });

              $scope.update = function () {
                  Todos.update({ id: $scope.todo._id }, $scope.todo, function () {
                      $location.url('/');
                  });
              }

              $scope.remove = function () {
                  Todos.remove({ id: $scope.todo._id }, function () {
                      $location.url('/');
                  });
              }
          }])

          //---------------
          // Routes
          //---------------

          .config(['$routeProvider', function ($routeProvider) {
              $routeProvider
                .when('/', {
                    templateUrl: '/todos.html',
                    controller: 'TodoController'
                })

                .when('/:id', {
                    templateUrl: '/todoDetails.html',
                    controller: 'TodoDetailCtrl'
                });
          }]);
    </script>
</body>
</html>
